<template>
	<div>
		<div class="search">
			<input v-model="keyWord" class="search-input" type="text" placeholder="输入城市名或拼音" />
		</div>
		<div class="search-content" ref="search" v-show="keyWord">
			<ul>
				<li class="search-item border-bottom" v-for="item of list" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>
				<li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
			</ul>
		</div>
	</div>
</template>
<script>
import Bscroll from 'better-scroll'
import { mapState ,mapMutations } from 'vuex'
	export default {
		name: 'CitySearch',
		props: {
			cities:Object
		},
		data () {
			return {
				keyWord: '',
				list: [],
				timer: null
			}
		},
		methods : {
			handleCityClick (city) {
				//this.$store.commit("changeCity", city)
				this.changeCity(city)
				this.$router.push("/")
			},
			...mapMutations(['changeCity'])
		},
		computed: {
			hasNoData () {
				return !this.list.length
			}
		},
		watch: {
			keyWord () {
				if (this.timer) {
					clearTimeout(this.timer)
				}
				if (!this.keyWord){
					this.list = []
					return
				}
				this.timer = setTimeout(() => {
					const result = []
					for (let i in this.cities){
						this.cities[i].forEach((value) => {
							if(value.spell.indexOf(this.keyWord) > -1 ||
								value.name.indexOf(this.keyWord) > -1){
								result.push(value)
							}
						})
					}
					this.list = result

				},100)
			}
		},
		mounted () {
			this.scroll = new Bscroll(this.$refs.search)
		}
	}
</script>
<style lang="stylus" scoped>
@import '~styles/veribles.styl'
.search
	height:.72rem
	background:$bgColor
	padding:0 .1rem
	.search-input
		height:.62rem
		line-height:.62rem
		width:100%
		text-align:center
		border-radius:.06rem
		color:#666
		padding:0 .15rem
		box-sizing:border-box
.search-content
	position:absolute
	top: 1.58rem
	left:0
	right:0
	bottom:0
	background:#eee
	z-index:1
	overflow:hidden
	.search-item
		line-height:.62rem
		padding-left:.2rem
		color:#666
		background:#fff


</style>